<template>
  <div>
    <!--     搜索条件-->
    <SearchForm @search="getTableData" @reset="clearSearch">
      <el-col :span="8" :xs="24" v-show="$permiss[234]">
        <el-form-item :label="$t('所属租户')" prop="adminUserId">
          <el-select v-model="page.adminUserId" style="width: 100%" clearable>
            <el-option v-for="item in tenantList" :key="item.adminUserId" :label="item.adminName"
                       :value="item.adminUserId"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('用户姓名')" prop="adminName">
          <el-input v-model="page.name"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24">
        <el-form-item :label="$t('手机号码')" prop="phone">
          <el-input v-model="page.phone"/>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[516]">
        <el-form-item :label="$t('APP名称')">
          <el-select style="width: 100%" v-model="page.productName" clearable>
            <el-option v-for="item in productList" :key="item.productId" :label="item.productName"
                       :value="item.productName"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="8" :xs="24" v-show="$permiss[231]">
        <el-form-item :label="$t('交易类型')" prop="type">
          <el-select v-model="page.type" style="width: 100%;" clearable>
            <el-option v-for="item in dealType" :value="item.key" :label="item.value" :key="item.key"></el-option>
          </el-select>
        </el-form-item>
      </el-col>
      <el-col :span="12" :xs="24">
        <el-form-item :label="$t('交易时间')" prop="timeValue">
          <el-date-picker
              unlink-panels
              v-model="page.timeValue"
              style="width: 100%"
              type="daterange"
              value-format="yyyy-MM-dd"
              range-separator="~"
              :start-placeholder="$t('开始日期')"
              :end-placeholder="$t('结束日期')">
          </el-date-picker>
        </el-form-item>
      </el-col>
    </SearchForm>

    <el-card shadow="never" style="margin-top: 10px" v-if="$permiss[231]">
      <!--      <div class="deal_type">-->
      <!--        <div class="content">-->
      <!--          <div class="header">{{ $t('交易类型') }}</div>-->
      <!--          <div class="body" style="background: #EFF6F9;">{{ $t('消费金额') }}</div>-->
      <!--        </div>-->
      <!--        <div v-for="item in dealType" class="content" :key="item.key">-->
      <!--          <div class="header">{{ item.value }}</div>-->
      <!--          <div class="body">{{ dealTypeTotal[item.key] }}</div>-->
      <!--        </div>-->
      <!--      </div>-->
      <Table :page="false" :table-column="dealTypeTableColumn" :table-data="dealTypeTotal" border>
        <template v-slot:first>
          <el-table-column align="center" :label="$t('交易类型')">
            <template>
              {{ $t('消费金额') }}
            </template>
          </el-table-column>
        </template>
      </Table>
    </el-card>
    <el-card shadow="never" style="margin-top: 10px">
      <div v-show="$permiss[232]">
        <el-link type="primary" :underline="false" class="amount" style="margin-right: 50px"> {{ $t('账户余额') }} :
          {{ amountTotal.balance }}
        </el-link>
        <el-link type="primary" :underline="false" class="amount"> {{ $t('消费总金额') }} : {{
            amountTotal.amount
          }}
        </el-link>
      </div>
      <Table :table-column="tableColumn" :page="page" :loading="loading" :table-data="tableData" @handleCurrentChange="handleCurrentChange"
             @handleSizeChange="handleSizeChange">
        <template slot="first">
          <el-table-column v-if="$permiss[234]" prop="adminName" :label="$t('所属租户')" align="center"></el-table-column>
        </template>
        <el-table-column :label="$t('交易类型')" align="center">
          <template slot-scope="{row}">
            {{ formatType(row.type) }}
          </template>
        </el-table-column>
      </Table>
    </el-card>
  </div>
</template>

<script>
import {dateFormatSection, defaultTimeDate} from "@/utils/tools";
import {dealRecordList, dealRecordTotal, dealType, dealTypeTotal, selectTenant, selectProduct} from '@/api/system'

export default {
  name: "transactionRecords",
  data() {
    return {
      page: {
        pageNum: 1,
        pageSize: 10,
        total: 0,
        timeValue: defaultTimeDate(2)
      },
      loading:false,
      tenantList: [],
      productList: [],
      dealType: [],
      tableColumn: [
        {label: this.$t('用户姓名'), prop: 'name',},
        {label: this.$t('手机号码'), prop: 'phone',},
        {label: this.$t('消费金额'), prop: 'amount',},
        {label: this.$t('交易时间'), prop: 'creationTime',},
        {label: this.$t('APP名称'), prop: 'appName',},
      ],
      tableData: [],
      dealTypeColumn: [],
      dealTypeTotal: [],
      dealTypeTableColumn: [],
      amountTotal: {}
    }
  },
  mounted() {
    this.getSelect()
    this.getTableData()
  },
  methods: {
    async getTableData() {
      const timeValue = dateFormatSection(this.page.timeValue)
      const params = Object.assign({}, this.page, {
        datetimeStart: timeValue && timeValue.length > 1 ? timeValue[0] : undefined,
        datetimeEnd: timeValue && timeValue.length > 1 ? timeValue[1] : undefined,
      })
      delete params.timeValue
      this.loading = true
      this.getAmountTotal(params)
      this.getDealTypeTotal()
      const res = await dealRecordList(params)
      if (res.code === 1) {
        const {list, total} = res.data
        this.tableData = list
        this.page = Object.assign({}, this.page, {
          total: total
        })
        this.loading = false
      }else {
        this.loading = false
      }
    },
    async getSelect() {
      this.$permiss[232] && await this.geDealType()
      selectTenant().then(res => {
        this.tenantList = res.data
      })
      selectProduct().then(res => {
        this.productList = res.data
      })
    },
    handleCurrentChange(value) {
      this.page.pageNum = value
      this.getTableData()
    },
    handleSizeChange(value) {
      this.page.pageSize = value
      this.getTableData()
    },
    // 获取交易总计
    async getAmountTotal(params) {
      const res = await dealRecordTotal(params)
      if (res.code === 1) {
        this.amountTotal = res.data
      }
    },
    // 获取交易类型
    async geDealType() {
      const res = await dealType()
      if (res.code === 1) {
        this.dealType = res.data
        const column = []
        res.data.forEach(item => {
          column.push({
            label: item.value,
            prop: item.key.toString(),
            minWidth: 150,
          })
        })
        this.dealTypeTableColumn = column
      }
    },
    // 获取交易类型总计
    async getDealTypeTotal() {
      const [datetimeStart, datetimeEnd] = dateFormatSection(this.page.timeValue || [])
      const res = await dealTypeTotal({...this.page, datetimeStart, datetimeEnd, timeValue: null})
      if (res.code === 1) {
        const obj = {}
        res.data.forEach(item => {
          obj[item.type] = item.amount
        })
        this.dealTypeTotal = [{...obj}]
      }
    },
    formatType(value) {
      return this.dealType.length > 0 ? this.dealType.find(item => item.key === value).value : value
    },
    // 重置搜索框
    clearSearch() {
      this.page = {
        pageNum: 1,
        pageSize: 10,
        total: 0
      }
      this.getTableData()
    },
  }
}
</script>

<style lang="less" scoped>
.deal_type {
  width: 100%;
  display: flex;
  border: 1px solid #eeeeee;
  overflow: auto;

  .content {
    border-right: 1px solid #eeeeee;
    min-width: 200px;

    .header {
      padding: 15px;
      background: #EFF6F9;
      text-align: center;
      font-size: 14px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #000000;
    }

    .body {
      padding: 15px;
      text-align: center;
      color: #000000;
      border-top: 1px solid #eeeeee;
    }
  }
}

.amount {
  font-size: 18px;
  margin-left: 30px;
  margin-bottom: 10px;
}
</style>
